<template>
  <div>
    <i
      v-for="(iconname,key) in icons.elIconList"
      :key="key"
      class="icon"
      :class="iconname"
      @click="submitIcon(iconname)"
    />
    <span v-for="(svgClass) in icons.svgIcon " class="svnSpan" @click="submitIcon(svgClass)">
      <svg-icon :icon-class="svgClass" />
    </span>
  </div>
</template>

<script>
import icons from '@/utils/IconList'
export default {
  props: {
    callback: {
      type: Function
    }
  },
  data() {
    return {
      icons: {}
    }
  },
  created() {
    this.getIconList()
  },
  methods: {
    submitIcon(iconname) {
      this.callback(iconname)
    },
    getIconList() {
      this.icons = icons
    }

  }
}
</script>

<style lang="scss" scoped>
  div{
     .icon{
      padding: 10px;
      &:hover{
        background-color: #7a8b9a;
      }
    }
    .svnSpan {
      padding: 10px;
      line-height: 35px;
      &:hover{
        background-color: #7a8b9a;
      }
    }
  }

</style>
